<html>
  <head>
    <link rel="stylesheet" href="https://static.figma.com/api/figma-extension-api-0.0.1.css">

    <style>
.icons-grid {
  display: flex;
  flex-wrap: wrap;
}

.icon {
  border-radius: 4px;
  cursor:grab;
  height:24px;
  margin: 4px;
  padding: 4px;
  width:24px;
}

.icon:hover {
  background-color: #ddd;
}
    </style>
  </head>
  <body>
    <p>Drag any icon to the canvas:</p>
    <div class="icons-grid">
      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-center"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-anchor"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
      </span>

      <span class="icon" draggable="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bluetooth"><polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"></polyline></svg>
      </span>
    </div>

    <form>
      <label>Parenting strategy:</label>
      <div>
        <input type="radio" name="parentingStrategy" value="page">Page
      </div>
      <div>
        <input type="radio" name="parentingStrategy" value="immediate" checked="checked">In parentable node
      </div>
    </form>
  </body>
  <script>
const icons = document.getElementsByClassName('icon');

for (const icon of icons) {
  icon.addEventListener('dragend', e => {
    // Don't proceed if the item was dropped inside the plugin window.
    if (e.view.length === 0) return;

    const file = new File(
      [e.target.innerHTML],
      'content.svg',
      { type: 'image/svg+xml' }
    );

    const parentingStrategy = document.querySelector('input[name="parentingStrategy"]:checked').value;

    // This will trigger a drop event in Figma that we can register a callback for
    window.parent.postMessage(
      {
        pluginDrop: {
          clientX: e.clientX,
          clientY: e.clientY,
          files: [file],
          dropMetadata: { parentingStrategy }
        }
      },
      '*'
    );
  });
}
  </script>
</html>
